<link rel="stylesheet" href="<?php echo $this->CSS_PATH?>lay_admin.css" media="all">
<link rel="stylesheet" href="<?php echo $this->CSS_PATH?>template.css" media="all">
<style>
    .layui-col-space30>*{
        padding: 15px 15px 0 15px;
    }
</style>
<div class="weadmin-body" id="app">

    <div class="layui-fluid layadmin-cmdlist-fluid">
        <div class="layui-row layui-col-space30">
            <span class="layui-breadcrumb" lay-separator="/">
              <a href="javascript:;">首页</a>
              <a href="<?php echo $this->createUrl('user/list')?>">用户</a>
              <a><cite><?php echo $username?></cite></a>
             </span>
        </div>

        <div class="layui-row layui-col-space30">
            <div class="layui-col-md3">
                <form class="layui-form">
                    <div class="layui-inline">
                        <label class="layui-form-label">相册</label>
                        <div class="layui-input-inline">
                            <select name="pid" id="pid" name="time_type" lay-filter="floder" lay-search>
                                <?php foreach ($floder_list as $floder):?>
                                    <option value="<?php echo $floder->id?>"><?php echo $floder->name?></option>
                                <?php endforeach;?>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-col-md6">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" id="checked">全选</button>
                    <button class="layui-btn layui-btn-danger layui-btn-sm" id="unchecked">反选</button>
                </div>
            </div>

        </div>
        <div class="layui-row layui-col-space30">
            <div class="layui-col-md2 layui-col-space30" v-for="(v,k) in pageList">
                <div class="cmdlist-container">
                    <a href="javascript:;">
                        <img v-bind:src="'<?php echo Yii::app()->baseUrl?>'+v.thumb_src" />
                    </a>

                    <div class="cmdlist-text" style="text-align: center">
                        <p>{{v.title}}</p>
                        <form class="layui-form">
                            <input type="checkbox" :value="v.id" v-model="v.has" lay-skin="switch" lay-filter="img_checked" lay-text="ON|OFF">
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12 layui-col-sm12" style="background: #fff">
                <div id="pageBox" style="text-align: center"></div>
            </div>
        </div>
    </div>

</div>
<script src="<?php echo Yii::app()->baseUrl?>/static/vue/vue.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            pageList:[],
            form:null
        },
        updated:function() {
            this.form.render();
        }
    });
    layui.extend({
        admin: '<?php echo Yii::app()->baseUrl?>/static/admin/js/admin'
    });
    layui.use(['laypage','jquery','layer','form','admin'], function() {
        var $ = layui.jquery;
        var laypage = layui.laypage;
        var layer = layui.layer;
        var form = app.form = layui.form;
        //总页数大于页码总数
        var pageObj = {
            elem: 'pageBox',
            limit: 12,
            limits:[12, 24, 36, 48, 60],
            count: <?php echo $count?>, //数据总数
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
            pid:<?php echo $default_floder?>,
            jump: function(obj, first) {
                getPageList(this.pid);
            }
        };
        laypage.render(pageObj);

        form.on('select(floder)', function (data) {
            pageObj.curr = 1;
            pageObj.pid = data.value;
            var count_param = {
                type:'count',
                pid:data.value
            };
            $.post('<?php echo $this->createUrl('user/getUserImg')?>',count_param, function (ret) {
                if (ret.code != 0) {
                    return;
                }
                pageObj.count = ret.count;
                laypage.render(pageObj);;
            });
        });

        //监听指定开关
        form.on('switch(img_checked)', function(data) {
            var params = {
                is_checked : data.elem.checked ? 1 : 0,
                img_id : data.value,
                pid : $('#pid').val(),
                userid : '<?php echo $userid?>'
            };
            $.post('<?php echo $this->createUrl('user/changeImg')?>', params, function (ret) {
                if (ret.code == 0) {
                    layer.msg(ret.message,{time:800,icon:1});
                } else {
                    layer.msg(ret.message,{time:1500,icon:2});
                }
            });
        });

        function getPageList(pid) {
            var load_index = layer.load();
            var url = '<?php echo $this->createUrl('user/getUserImg')?>';
            var data = {
                'pid':pid,
                'page':pageObj.curr,
                'limit' : pageObj.limit,
                'userid':'<?php echo $userid?>'
            };
            $.post(url, data, function (ret) {
                layer.close(load_index);
                if (ret.code != 0) {
                    layer.msg(ret.message, {time:2000, icon:2});
                } else {
                    //查询出来的数据交给vue，使用双向数据绑定实现页面图片更新
                    app.pageList = ret.data;
                }
            });
        }
        $('#checked').click(function () {
            layer.confirm('确认全选？', function (index) {
                layer.close(index);
                checked(true);
            });
        });
        $('#unchecked').click(function () {
            layer.confirm('确认反选？', function (index) {
                layer.close(index);
                checked(false);
            });
        });
        function checked(is_checked) {
            var load_index = layer.load();
            var params = {
                userid:'<?php echo $userid?>',
                pid:$('#pid').val(),
                checked:is_checked ? 1 : 0
            };
            $.post('<?php echo $this->createUrl('user/batchChangeImg')?>',params,function (ret) {
                if (ret.code != 0) {
                    layer.close(load_index); //拉取失败之后直接关闭进度图片
                    layer.msg(ret.message,{time:1500,icon:2});
                } else {
                    pageObj.curr = 1;
                    pageObj.jump(pageObj);
                    layer.close(load_index); //批量操作成功之后，还要去拉取当前相册的第一页数据，拉完之后才关闭进度图片
                    layer.msg(ret.message,{time:1000,icon:1});
                }
            });
        }
    });

</script>